﻿{extend name="$index_style_layout" /}

<!--SEO相关-->
{block name="head_title"}{$fid?($info['seo_title']?:$info['name']):$m_info['title']}{/block}
{block name="head_keword"}{$fid?($info['seo_keywords']?:$info['name']):$m_info['title']}{/block}
{block name="head_description"}{$info.seo_description}{/block}

{block name="body_content"}

 
<!--分类开始-->
<style type="text/css">
.MainMenu{
	margin-top:8px;
	background: #FFF;
	padding: 15px 10px;
}
.MainMenu ul:after{
	content: '';
	display:block;
	clear: both;
}
.MainMenu ul li{
	width:25%;
	float: left;
	overflow: hidden;
	position: relative;
	margin-bottom:5px;
}
.MainMenu ul li span,.MainMenu ul li em{
	display: block;
	width:60px;
	overflow: hidden;
	margin: auto;
	text-align: center;
	position: relative;
}
.MainMenu ul li span{
	border-radius: 50%;
	background: #ccc;
	color: #FFF;
}
.MainMenu ul li em{
	height: 20px;
	overflow: hidden;
	font-size:14px;
}
.MainMenu ul li span:before{
	content: '';
	display: block;
	padding-top: 100%;
}
.MainMenu ul li span i{
	position: absolute;
	left:50%;
	top: 50%;
	font-size:30px;
  -webkit-transform: translate3D(-50%, -50%, 0);
      -ms-transform: translate3D(-50%, -50%, 0);
          transform: translate3D(-50%, -50%, 0);
}
.sort_button{
	width:100%;
}
.sort_button .swiper-pagination{
	bottom:0px !important;
}
</style>

<!-- 滑动按钮要用到的CSS与JS文件,他涉及到三个class类 swiper-container swiper-wrapper swiper-slide -->
<link href="__STATIC__/libs/swiper/swiper.min.css" rel="stylesheet">
<script src="__STATIC__/libs/swiper/swiper.min.js"></script>
<script>
    $(function () {
        var swiper = new Swiper('.sort_button', {
			autoplay: {
				delay: 2000,
			 },
			pagination: {
				el: '.swiper-pagination', 
			},
        });
    })
</script>

<div class="MainMenu">
		<ul class="swiper-container sort_button">
					<div class="swiper-wrapper">
{volist name=":array_chunk(sort_config('',0),8,true)" id="array"}

<div class="swiper-slide">
{volist name="$array" id="name"}
			<li><a href="{:urls('content/index',['fid'=>$key])}"><span {if $key==$fid}style="background:#23C075;"{/if}><i class="{$key|get_sort='logo'|default='fa fa-leaf'}"></i></span><em>{$name}</em></a></li>
{/volist}
</div>
{/volist}
					</div>
					<div class="swiper-pagination"></div>
		</ul>
</div>
<!--分类结束-->

<!----城市选择开始----->
<link href="__STATIC__/mui/css/mui.min.css" rel="stylesheet" />
<link href="__STATIC__/mui/css/mui.picker.css" rel="stylesheet" />
<link href="__STATIC__/mui/css/mui.poppicker.css" rel="stylesheet" />
<style type="text/css">
.area_search{
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	height:40px;
	background:#f6f6f6;
}
.area_search div{
	 width:25%;
	 float:left;
	 line-height:40px;
	 height:40px;
	 overflow:hidden;
}
.area_search div i{
	margin-left:8px;
	margin-right:5px;
	color:#888;
}
</style>
<div class="area_search" id="showUserPicker">
	<div><i class="glyphicon glyphicon-triangle-bottom"></i><em>省</em></div>
	<div><i class="glyphicon glyphicon-triangle-bottom"></i><em>市</em></div>
	<div><i class="glyphicon glyphicon-triangle-bottom"></i><em>县</em></div>
	<div><i class="glyphicon glyphicon-triangle-bottom"></i><em>镇</em></div>
</div>

<script src="__STATIC__/mui/js/mui.min.js"></script> 
<script src="__STATIC__/mui/js/mui.picker.js"></script>
<script src="__STATIC__/mui/js/mui.poppicker.js"></script>
<script type="text/javascript">
var array_pid = [0,0,0,0,0];
var array_name = ['省','市','县','镇'];
var areaPicker = new mui.PopPicker();
//areaPicker.setData([{value: '1',text: '广东'}, {value: '2',text: '湖南'}]);

//动态获取城市数据,省份选择必须要指定iftop为1
function get_area_data(pid,iftop,callback){
	var lists = new Array();
	$.get("{:purl('area/api/getlist')}?iftop="+iftop+"&pid="+pid,function(res){
		layer.closeAll();
		if(res.code==0){
			$.each(res.data,function(i,rs){
				//console.log('-',rs.id);
				lists.push({
					value: rs.id,
					text: rs.name
				});
			});
			areaPicker.setData(lists);
			callback();
		}	
	})
}

$(".area_search div").each(function(i){
	var iftop = i==0 ? 1 : 0; //第一个是省所以要指定为1
	var obj = $(this);
	obj.click(function(){
		layer.msg('请稍候,加载中...');
		get_area_data(array_pid[i],iftop,function(){
			areaPicker.show(function(items) {
				//$('#userResult').html(JSON.stringify(items[0]));
				obj.find("em").html(items[0].text);
				var j = i+1; //下一项
				if(array_pid[j]!=items[0].value){	//更换了选择项,要把下面的清除掉 console.log('o',jj);
					for(var jj=j;jj<5;jj++){
						array_pid[jj] = 0;
						if(jj<4)$(".area_search div").eq(jj).find('em').html(array_name[jj]);
					}
				}
				array_pid[j] = items[0].value;
				haveshowpage[0] = haveshowpage[1] = haveshowpage[2] = 0;	//方便从第一页开始
				showMoreContent();	//调用显示
			});
		});		
	});
})
</script>
<!----城市选择结束----->

<link rel="stylesheet" href="__STATIC__/group/list.css">	
<div class="MainContainer ShowContentType">
	<div class="ShowTypes">
		<a href="#">人气__QUN__</a>
		<a href="#">最新__QUN__</a>
		<a href="#">推荐__QUN__</a>
	</div>
	<div class="ListBox">
	{qb:tag name="qun_waplist_001" union="order,by,mid,fid,status" where="province_id=$province_id&city_id=$city_id&zone_id=$zone_id&street_id=$street_id" order="view" by="desc" type="qun" rows="8"}
		<div class="list">
			<ul>
				<li class="img"><a href="{$rs.url}"><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nopic.png'"><span class="num{$i}">{$i}</span></a></li>
				<li class="info">
					<div class="title"><a href="{$rs.url}">{$rs.title}</a></div>
					<div class="cnt">{$rs.content|get_word=200}</div>
					<div class="other"><span><i class="fa fa-flag-checkered"></i>{:fun('area@get',$rs.zone_id)} {:fun('area@get',$rs.street_id)} </span>
						<em><i class="fa fa-user-o">{$rs.usernum}</i></em>
						<em><i class="fa fa-file-text-o">{$rs.replynum}</i></em>
					</div>
				</li>
				<li class="join"><a href="#" onclick="joinGroup({$rs.id})">加入</a></li>
			</ul>
		</div>
	{/qb:tag}
	</div>
	<div class="ListBox"></div>
	<div class="ListBox"></div>
	<div class="ShowMores" style="display:none;">查看更多...</div>
	<!--
	<div class="addGroup">
		<ul>
			<ol><a href="{:murl('content/postnew')}"><i class="fa fa-plus"></i></a></ol>
			<li>创建村庄</li>
		</ul>
	</div>-->
</div>	

<script type="text/javascript">

var ajax_url_db = ['&order=view&by=desc&','&order=id&by=desc&','&status=2,order=id&by=asc&'];
var choose_i = 0; //选中第几项
var haveshowpage = []; //每一项,作个标志,已经已显示到第几页
    haveshowpage[0] = 1; //第一项就从第二页开始

//显示更多
function showMoreContent(){	
	var url = ajax_url_db[choose_i];	//第几项对应的网址
	url += "province_id=" + (array_pid[1]>0?array_pid[1]:'') + "&city_id=" + (array_pid[2]>0?array_pid[2]:'') + "&zone_id=" + (array_pid[3]>0?array_pid[3]:'') + "&street_id=" + (array_pid[4]>0?array_pid[4]:'') + "&";
	haveshowpage[choose_i]++;
	$.get('{qb:url name="qun_waplist_001"/}' + haveshowpage[choose_i] + url + Math.random(),function(res){
		if(res.code==0){
			if(res.data==''){
				if(haveshowpage[choose_i]==1){
					layer.msg("没有相关内容!",{time:1000});
					$('.ShowContentType .ListBox').eq(choose_i).html('');
					return ;
				}
				layer.msg("已经显示完了！",{time:500});
				$('.ShowMores').off("click");
				$('.ShowMores').html('显示完了');
				$('.ShowMores').css({'background':'#eee'});
			}else{
				if(haveshowpage[choose_i]==1){
					$('.ShowContentType .ListBox').eq(choose_i).html(res.data);
				}else{
					$('.ShowContentType .ListBox').eq(choose_i).append(res.data);
				}
				scroll_get = true;
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}


//切换显示
function showContentType(num){

	choose_i = num;
	$('.ShowMores').off("click");	//先移除,避免重复加多次click事件
	$('.ShowMores').on("click",showMoreContent);
	$('.ShowMores').html('查看更多');
	$('.ShowMores').css({'background':'orange'});

	if(haveshowpage[num]==undefined){
		haveshowpage[num] = 0;
		showMoreContent();
	}

	$('.ShowContentType .ShowTypes a').removeClass('ck');
	$('.ShowContentType .ShowTypes a').eq(num).addClass('ck');
	$('.ShowContentType .ListBox').hide();
	$('.ShowContentType .ListBox').eq(num).show();
}
$('.ShowContentType .ShowTypes a').click(function(){
	showContentType( $(this).index() );
});
showContentType(0);

//滚动显示更多
var scroll_get = true;	//做个标志,不要反反复复的加载
$(document).ready(function () {
	$(window).scroll(function () {
		if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
			scroll_get = false;			
			layer.msg('内容加截中,请稍候',{time:1500});
			showMoreContent();
		}
	});
});


function joinGroup(id){
	$.get("{:urls('wxapp.member/join')}?id=" + id ,function(res){
		if(res.code==0){
			layer.alert("加入成功！");
		}else{
			layer.alert("加入失败:"+res.msg);
		}	
	});
}
</script>

{/block}